<template>
  <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                 :current-page="childMsg.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize"
                 layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data () {
    return {
      pageParam: {
        pageNum: this.childMsg.pageNum,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  created () {
  },
  methods: {
    handleSizeChange (val) {
      this.pageParam.pageSize = val
      this.$emit('callFather', this.pageParam)
    },
    handleCurrentChange (val) {
      this.pageParam.pageNum = val
      this.$emit('callFather', this.pageParam)
    }
  }
}
</script>

<style>
  .page-box {
    margin: 10px auto;
  }
</style>
